<template>
  <div> 
    <div class="aa" :style="'background-image: url('+zhuyetu+');'">
      <div class="aabb">
        <div class="gertiaomu">
          <div class="touxiang inline_block float_l">
            <el-upload
              class="avatar-uploader"
              action="http://andysama.work:8086/files/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <div class="genghuan">更换头像</div>
              <img :src="user.avatarUrl" ref="upload" class="avatar">
            </el-upload>
          </div>
          <div class="touyou inline_block float_l">
            <div style="height:40px;line-height: 40px;"><h2>{{user.nickname}}</h2></div>
            <input class="tyd" type="text" placeholder="个性签名" maxlength="20"/>
          </div>
        </div>
      </div>
    </div>
      <el-tabs :tab-position="tabPosition" style="height: 400px;">
        <el-tab-pane label="账号与安全">
          <div class="zu">
            <h4>登录密码</h4>
            <div class="zud">
              <input  type="text" id="ab1" class="nnno" @blur="shijiao('ab1')" :value="user.password">
              <span class="pwd">{{passwordNow}}</span>
              <span class="genr" id="a1" @click="jujiao('a1')">修改密码</span>
            </div>
          </div>
          <div class="zu">
            <h4>手机号</h4>
            <div class="zud">
              <input type="text" id="ab2" class="nnno" @blur="shijiao('ab2')" :value="sjh">
              <span class="phn">{{sjh}}</span>
              <span class="genr" id="a2" @click="jujiao('a2')">修改手机号</span>
            </div>
          </div>
          <div class="zu">
            <h4>邮箱</h4>
            <div class="zud">
              <input type="text" id="ad3" class="nnno" @blur="shijiao('ad3')" :value="youx">
              <span class="yxiang">{{youx}}</span><span class="genr" id="a3"  @click="jujiao('a3')">修改邮箱</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="收货地址">

        </el-tab-pane>
        <el-tab-pane label="京东客服">

        </el-tab-pane>
        <el-tab-pane label="待添加">待添加</el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
export default {
  name:"personal_center",
  data() {
    return {
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}, //获取用户
      tabPosition: 'left',//左侧标签页
      sjh:"199****8543",//电话号码
      youx:"***********",//邮箱
      passwordNow:"***********",
      zhuyetu: require("../../assets/bilbil_ge.webp"),//主页图片
      toux: "",//头像图片
    }
  },
  methods:{
    jujiao(n){
      let a = document.getElementById(n);
      let b = a.previousSibling;
      b.style.display="none";
      let c = b.previousSibling;
      c.style.display="inline-block";
      c.focus();
    },
    shijiao(n){
      console.log("失去焦点");
      let c = document.getElementById(n);
      let b = c.nextElementSibling;
      c.style.display="none";
      b.style.display="inline-block";
    },
    handleAvatarSuccess(res, file) {
      this.user.avatarUrl = res.data;
      this.toux=this.user.avatarUrl;
      this.$emit('faqi', this.toux);
      this.$API.registerUser(this.user).then(res=>{
        if(res.code === "200"){
           this.$message.success(res.msg)
           localStorage.removeItem("user")
           localStorage.setItem("user",JSON.stringify(this.user)) 
           
        }
      })
      
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped lang="less">
  .nnno{
    display: none;
  }
  .avatar-uploader{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  /deep/ .avatar-uploader{
    position: relative;
    .el-upload{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
::-webkit-input-placeholder{/*Webkit browsers*/
	color:white;
}
:-moz-placeholder{/*Mozilla Firefox 4 to 8*/
	color:white;
}
::moz-placeholder{/*Mozilla Firefox 19+*/
	color:white;
}
:-ms-input-placeholder{/*Internet Explorer 10+*/
    color:white;
}
input:focus {
  background-color: white;
}
.aa{
  margin-top: -30px;
  width:100%;
  height: 300px;
  
  background-position: 50%;
  background-size:cover;
  position: relative;
  border-radius: 0px 0px 5px 5px;
}
.aabb{
  width: 100%;
  height: 120px;
  background: linear-gradient(rgba(255,255,255,0) ,rgba(153, 153, 153, 0.632));
  position:absolute;
  bottom: 0;
  box-sizing: border-box;
  border-radius: 0px 0px 5px 5px;
}
.gertiaomu{
  position: relative;
  margin-left: 30px;
}
.touxiang{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  line-height: 80px;
  // background-color: aquamarine;
  img{
    // position: relative;
    // top: 0;
    // left: 0;
    background-size: contain;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid white;
  }
  .genghuan{
    display: none;
    position: relative;
    z-index: 2222;
    color: white;
    font-weight: 600px;
    top: 0;
    left: 0;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: rgba(102, 102, 102, 0.33);
  }
  .avatar{
    position: absolute;
    top: 0;
    left: 0;
  }
}
.touxiang:hover .genghuan{
  display: block;
  cursor:pointer;
}
.touyou{
  color: white;
  margin-left: 20px;
  position: relative;
  top: 20px;
  width: 800px;
  height: 80px;
  .tyd{
    background:rgba(0,0,0,0);
    border-color: transparent;
    color: white;
    width: 700px;
    height: 30px;
    outline: none;
  }
}
.inline_block{
  display: inline-block;
}
.float_l{
  float: left;
}
/deep/.el-tabs__item {
    font-weight:700!important;
    font-size: 20px!important;
    text-align: center!important;
  }
/deep/.el-tabs{
  margin-top: 20px;
  background-color: rgb(245, 245, 245);
  padding: 20px 0 0 20px;
  font-size: 18px;
}
.zu{
  height: 81px;
  padding: 10px 30px;
  h4{
    font-size: 20px;
    padding: 5px 0;
  }
  .zud{
    width: 100%;
    input{
      border-color: transparent;
      width: 200px;
      height: 30px;
      font-size: 18px;
      outline: none;
    }
  }
  .genr{
    float: right;
    margin-left: 10px;
    padding: 0 5px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid rgb(220, 220, 220);
  }
  .genr:hover{
    background-color: #E3E5E7;
    cursor:pointer;
  }
}

</style>